<template>
  <movable-area class="content">
    <view class="top_div">
      <u-navbar title="好友列表" :titleStyle="{ fontSize: '16px', color: '#fff' }" leftIcon="" bgColor="#5394F2"
        placeholder="true"></u-navbar>
      <view class="search flex_center">
        <u--input class="search_input" placeholder="请输入好友名称" prefixIcon="search" v-model="keyword"
          prefixIconStyle="font-size: 22px;color: #909399" @confirm="getRefresh"></u--input>
        <i class="flex_center" @click="getRefresh">
          <img src="@/static/image/friend_icon.png" alt="">
        </i>
      </view>
    </view>
    <view class="list_ul">
      <scrollList class="scroll-view" ref="scroll" :page.sycn="page" :refresherEnabled="true" :scrollType="true"
        :reset="true" @loadmore="loadmore" @query="getRefresh">
        <view class="list_li flex_between flex_items" v-for="(item, index) in list" :key="index">
          <img :src="$IMG_HOST + item.avatar" alt="">
          <div class="flex1 user_name flex_between flex_items">
            <text>{{ item.username }}</text>
            <div class="chat flex_center" v-if="item.isFriend" @click="goChat(item._id)">已是好友</div>
            <div class="chat flex_center" v-else @click="addFriend(item._id)">添加好友</div>

          </div>
        </view>
      </scrollList>
    </view>
  </movable-area>
</template>
<script>
import scrollList from '@/components/scroll-list/scroll-list.vue'

export default {
  components: {
    scrollList
  },
  data() {
    return {
      keyword: '',//搜索关键字
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0, //总条数
        pageTotal: 0, //当前条数
        status: "loading",
      },
      list: [],
    }
  },
  watch: {},
  onShow() {
    this.getRefresh();
  },
  methods: {
    //去聊天
    goChat(friendId){

    },
    // 添加好友
    addFriend(friendId) {
      this.$Ajax({
        url: "friend/addFriend",
        data: {
          userId: this.$Storage.getUserInfo()._id,
          friendId: friendId,
          phone: this.$Storage.getUserInfo().phone,
        },
        method: 'post'
      }).then(res => {
        console.log(res)
        this.$u.toast('添加成功');
        this.getRefresh();
      })
    },
    getList() {
      const { pageSize, pageNum } = this.page;
      let data = {
        userId: this.$Storage.getUserInfo()._id,
        phone: this.$Storage.getUserInfo().phone,
      };
      if (this.keyword) data.keyword = this.keyword;
      this.$Ajax({
        url: "friend/list",
        data: data,
        method: 'get'
      }).then(res => {
        console.log(res)
        this.list = res.data;
        this.page.total = this.list.length;
        this.page.pageTotal = this.list.length;
        // this.page.status = "loadmore";
        this.page.status = "period";
      })

    },
    //   下拉刷新
    getRefresh() {
      this.page.pageNum = 1;
      this.page.status = "loading";
      this.getList();
      setTimeout(() => {
        this.$refs.scroll.resetStyle();
      }, 1000);
    },
    //点击加载
    loadmore(item) {
      console.log(item, "底部");
      this.page.pageNum++;
      this.page.status = "loading";
      this.getList();
    },
  },
  beforeCreate() { },
  created() { },
  beforeMount() { },
  mounted() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style scoped lang='scss'>
.content {
  width: 100vw;
  height: 100vh;

  .top_div {
    // background: #5394F2;
    background: linear-gradient(180deg, #5394F2 90%, rgba(82, 147, 241, .0) 100%);
    padding-bottom: 40rpx;
  }

  .search {
    padding: 10rpx 20rpx;

    .search_input {
      background: #fff;
      border-radius: 12rpx;
    }

    i {
      margin-left: 24rpx;
      width: 60rpx;
    }
  }

  .list_ul {
    padding: 40rpx 28rpx 100rpx;

    .list_li {
      padding: 24rpx;
      border-radius: 20rpx;
      background: #F6F6F6;
      margin-bottom: 24rpx;

      img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .user_name {
        text {
          font-size: 32rpx;
          font-weight: '宋体';
          font-weight: bold;
          padding-left: 20rpx;
        }

        .chat {
          font-size: 24rpx;
          height: 60rpx;
          padding: 0 30rpx;
          white-space: nowrap;
          border-radius: 14rpx;
          color: #fff;
          background: #5394F2;
        }
      }
    }
  }
}
</style>